<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="16">
        <el-tag>线索ID：{{id}}</el-tag>
        <el-descriptions class="margin-top" title="带边框列表" :column="3" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              创建时间
            </template>
            {{form.createTime}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{form.phone}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              渠道来源
            </template>
            <!--            {{form.channel}}-->
            {{selectDictLabel(dict.type.clues_item, form.channel)}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              线索归属
            </template>
            <el-tag size="small">{{form.owner}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              活动信息
            </template>
            活动编号/代金劵/折扣
          </el-descriptions-item>
        </el-descriptions>
        <el-row type="flex" justify="end">
          <el-col :span="6">
            <el-button v-if="(form.status == 1 || form.status == 2) && form.falseCount < 3" size="mini"
                       type="danger" @click="handleFalseClue">伪线索
            </el-button>
            <el-button v-if="form.status == 1 || form.status == 2" size="mini"
                       type="success" @click="handleTransform">转商机
            </el-button>
          </el-col>
        </el-row>
        <!--    分割线-->
        <el-divider></el-divider>
        <el-tag>更新线索</el-tag>
        <el-form ref="form" :disabled="disabled" :model="form" :rules="rules" label-width="100px">
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="客户姓名" prop="name">
                <el-input v-model="form.name" type="textarea" placeholder="请输入客户姓名"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="form.sex" placeholder="请输入性别">
                  <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value"
                             :key="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="8">
              <el-form-item label="年龄" prop="age">
                <el-input v-model="form.age" placeholder="请输入年龄" type="number"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="微信号" prop="weixin">
                <el-input v-model="form.weixin" placeholder="请输入微信号"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="qq号" prop="qq">
                <el-input v-model="form.qq" placeholder="请输入qq号"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="意向等级" prop="level">
                <el-select v-model="form.level" placeholder="请输入意向等级">
                  <el-option v-for="item in dict.type.clues_level" :label="item.label" :value="item.value"
                             :key="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="意向学科" prop="subject">
                <el-select v-model="form.subject" placeholder="请输入意向学科">
                  <el-option v-for="item in dict.type.course_subject" :label="item.label" :value="item.value"
                             :key="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="跟进记录" prop="record">
                <el-input v-model="form.record" type="textarea" placeholder="请输入跟进记录"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下次跟进时间" prop="nextTime">
                <el-date-picker clearable
                                v-model="form.nextTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择下次跟进时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row>
          <el-col :offset="16" :span="8">
            <el-button v-if="(form.status == 1 || form.status == 2) && !disabled" type="primary"
                       icon="el-icon-check" @click="submitForm">保存
            </el-button>
            <el-button icon="el-icon-close" @click="$emit('cancel')">取消</el-button>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <track-list :id="id" :key="trackListKey"></track-list>
      </el-col>
    </el-row>
    <false-clue ref="falseClueDialog" @success="handleSuccess"></false-clue>
  </div>
</template>

<script>
  import {getClue} from "@/api/crm/clue";
  import {listClueTrack, addClueTrack, transform2Business} from "@/api/crm/clueTrack";
  import TrackList from "@/views/crm/clue/components/track-list";
  import FalseClue from "@/views/crm/clue/components/false-clue";

  import {listRecord} from "@/api/crm/record";

  export default {
    name: "track-index",
    props: {
      clueId: {type: [String, Number],},
      view: {type: Boolean,},
    },
    components: {TrackList, FalseClue},
    dicts: ['sys_user_sex', 'clues_level', 'course_subject', 'clues_item', 'channel_type'],
    data() {
      return {
        id: this.clueId,
        disabled: false,
        // 辅助查询跟进记录
        trackListKey: 0,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          name: [
            {required: true, message: "客户姓名不能为空", trigger: "blur"}
          ],
        },
      }
    },
    watch: {
      clueId(newValue, oldValue) {
        this.id = newValue;
        this.getList();
      },
      view: {
        handler: function (newValue, oldValue) {
          this.disabled = newValue;
        },
        immediate: true
      },
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        getClue(this.id).then(resp => {
          this.form = resp.data;
        });
        this.trackListKey++;
      },
      // 提交表单
      submitForm() {
        addClueTrack(this.form).then(resp => {
          this.handleSuccess();
        });
      },
      // 伪线索
      handleFalseClue() {
        this.$refs.falseClueDialog.open = true;
        this.$refs.falseClueDialog.id = this.id;
        this.$refs.falseClueDialog.resetForm();
      },
      // 转商机
      handleTransform() {
        this.$msgbox.confirm(`确定转换线索${this.id}到商机吗？`).then(() => {
          transform2Business({id: this.id, record: '转商机'}).then(resp => {
            this.handleSuccess();
          });
        })
      },
      // 操作成功提示 handleSuccess
      handleSuccess() {
        this.$message.success('操作成功！');
        this.getList();
        //  通知父组件
        this.$emit('track');
      }
      // 示例代码
      // getAssignRecord() {
      //   // 简单调用自动生成的分页代码，取最大id的对象当作最近的分配记录
      //   listRecord({
      //     assignId: this.$route.query.clueId,
      //     type: 0,
      //     pageNum: 1,
      //     pageSize: 5,
      //     orderByColumn: 'id',
      //     isAsc: 'desc'
      //   }).then(resp => {
      //     this.assignRecord = resp.rows.reduce((a1, a2) => {
      //       return a1.id > a2.id ? a1 : a2
      //     });
      //   });
      // },
      // channelFormatter(row) {
      //   return this.selectDictLabel(this.dict.type.clues_item, row.channel);
      // },
    }
  }
</script>

<style scoped>

</style>
